<template>
  <div>
    <template>
      <el-select class="options" v-model="type" clearable placeholder="订单号">
        <el-option
          v-for="item in options"
          :key="item._id"
          :label="item.type"
          :value="item.types"
        ></el-option>
      </el-select>
      <input type="text" v-model="search" class="searchE" />

      <el-button
        class="search"
        type="success"
        style="background-color: rgb(13, 131, 228)"
        @click="finde"
        >查询</el-button
      >
    </template>
    <el-table :data="orderList" style="width: 100%">
      <el-table-column label="日期" prop="createTime"> </el-table-column>
      <el-table-column label="客户名称" prop="userID.account">
      </el-table-column>
      <el-table-column label="车辆型号" prop="carID.model"> </el-table-column>
      <el-table-column label="车牌" prop="carID.licensePlate">
      </el-table-column>
      <el-table-column label="租金" prop="spentMoney"> </el-table-column>
      <el-table-column label="取车时间" prop="startTime"> </el-table-column>
      <el-table-column label="还车时间" prop="endTime"> </el-table-column>
      <el-table-column label="订单状态" prop="status"> </el-table-column>
      <el-table-column align="right">
        <template slot-scope="scope">
          <el-popconfirm title="确定出租吗？" @onConfirm="changeOderstatus(scope.row._id)">
            <el-button slot="reference"  >同意出租</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
      <el-table-column align="right">
        <template slot-scope="scope">
          <el-button size="mini" @click="look(scope.row._id)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage - 0"
      :page-sizes="[5, 8, 10, 15]"
      :page-size="5"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total - 0"
    >
    </el-pagination>

    <!-- 查看订单详情 -->
    <el-dialog title="订单详情" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="订单号" :label-width="formLabelWidth">
          <el-input v-model="form._id" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="客户名称" :label-width="formLabelWidth">
          <el-input v-model="form.account" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="车辆类型" :label-width="formLabelWidth">
          <el-input v-model="form.type" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="订单生效时间" :label-width="formLabelWidth">
          <el-input v-model="form.createTime" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="取车时间" :label-width="formLabelWidth">
          <el-input v-model="form.startTime" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="还车时间" :label-width="formLabelWidth">
          <el-input v-model="form.endTime" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="订单状态" :label-width="formLabelWidth">
          <el-input v-model="form.status" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false"
          >确 定</el-button
        >
      </div>
    </el-dialog>

    <!-- 修改订单信息 -->
  </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
const { mapState, mapActions, mapMutations } = createNamespacedHelpers("order");

const { mapMutations: publicMutations } = createNamespacedHelpers(
  "publicStore"
);
export default {
  data() {
    return {
      formLabelWidth: "120px",
      dialogTableVisible: false,
      dialogFormVisible: false,
      search: "",
      type: "",
      options: [
        { type: "租金", types: "spentMoney" },
        { type: "订单号", types: "_id" },
        { type: "订单状态", types: "status" },
        { type: "创建时间", types: "createTime" },
      ],
      form: {
        _id: "",
        account: "",
        createTime: "",
        startTime: "",
        endTime: "",
        status: "",
        spentMoney: "",
        type: "",
        carID: {},
        userID: {},
      },
    };
  },
  created() {
    this.getOrder();
    this.setNowBreadcrumb("orderlist");
  },
  computed: {
    ...mapState([
      "orderList",
      "currentPage",
      "pageSize",
      "totalPages",
      "total",
    ]),
  },
  watch: {
    currentPage() {
      this.getOrder();
    },
    pageSize() {
      console.log("orderList", this.orderList);
      this.getOrder();
    },
  },
  methods: {
    ...mapMutations(["setPageSize", "setCurrent"]),
    ...mapActions([
      "getAllOrder",
      "findOrderByID",
      "getOrder",
      "changeOrderStatus",
    ]),
    ...publicMutations(["setNowBreadcrumb"]),
    handleSizeChange(val) {
      console.log(this.currentPage, this.pageSize, this.totalPages);
      this.setPageSize(val);
      this.getOrder();
    },
    handleCurrentChange(val) {
      this.setCurrent(val);
      this.getOrder();
    },
    async look(_id) {
      this.dialogFormVisible = true;
      const aa = await this.findOrderByID(_id);
      if (aa.status) {
        this.form._id = aa.data._id;
        this.form.account = aa.data.userID.account;
        this.form.createTime = aa.data.createTime;
        this.form.startTime = aa.data.startTime;
        this.form.endTime = aa.data.endTime;
        this.form.status = aa.data.status;
        this.form.spentMoney = aa.data.spentMoney;
        this.form.type = aa.data.carID.motorcycleType;
      }
    },
    finde() {
      const search = {
        value: this.search,
        type: this.type,
      };
      if (this.search || this.type) {
        this.getAllOrder(search);
      } else {
        this.getOrder();
      }
    },
    //修改订单状态
    changeOderstatus(_id) {
      const status = "pending";
      const data = this.changeOrderStatus({ _id, status });
     if (data) {
       this.getOrder()
     }
    },
  },
};
</script>

<style>
.searchE {
  width: 200px;
  height: 36px;
  margin: 0 10px;
  border-radius: 5px;
  border: solid 1px #cccccc;
  outline: none;
}
</style>